<template>
  <div class="tech-chart-container">
    <div ref="chart" class="chart-wrapper" style="background-color:white;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'TechLineChart',
  props: {
    // 图表数据
    chartData: {
      type: Object,
      default: () => ({
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          {name: '数据A', data: [120, 132, 101, 134, 90, 230, 210, 230, 190, 230, 210, 170]},
          {name: '数据B', data: [220, 182, 191, 234, 290, 330, 310, 330, 320, 330, 310, 320]},
        ]
      })
    },
    // 图表标题
    title: {
      type: String,
      default: '曲线图组件模版'
    }
  },
  data() {
    return {
      chart: null,
      // 小清新配色方案（适合白色背景）
      colorPalette: ['#66cc99', '#66b3ff', '#ffcc99', '#ff99cc', '#99ccff']
    }
  },
  mounted() {
    // 初始化图表
    this.initChart()
    // 监听窗口大小变化，防抖处理
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 销毁图表实例，释放资源
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      // 初始化图表实例
      this.chart = echarts.init(this.$refs.chart)

      // 设置图表配置
      const option = this.getChartOption()

      // 设置图表数据
      this.chart.setOption(option)

      // 添加鼠标悬停效果
      this.chart.on('mouseover', function (params) {
        if (params.componentType === 'series') {
          this.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
      })

      this.chart.on('mouseout', function (params) {
        if (params.componentType === 'series') {
          this.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
      })
    },

    getChartOption() {
      const {xAxis, series} = this.chartData

      return {
        // 全局颜色配置，不在series中单独设置
        color: this.colorPalette,

        // 标题配置
        title: {
          text: this.title,
          left: 'center',
          textStyle: {
            color: 'black',
            fontSize: 18,
            fontWeight: 'normal',
            textShadow: '0 0 10px rgba(0, 243, 255, 0.7)'
          }
        },

        // 提示框配置
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(10, 25, 47, 0.8)',
          borderColor: 'rgba(0, 243, 255, 0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#eaeaea'
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0, 243, 255, 0.3)',
              width: 1,
              type: 'dashed'
            }
          }
        },

        // 图例配置
        legend: {
          data: series.map(item => item.name),
          top: 30,
          textStyle: {
            color: '#b8b8b8'
          },
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8
        },

        // 网格配置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        // X轴配置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8892a0',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)'
            }
          }
        },

        // Y轴配置
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8892a0',
            fontSize: 12,
            formatter: '{value}'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)'
            }
          }
        },

        // 系列数据配置
        // 系列数据配置
        series: series.map((item, index) => {
          // 安全获取颜色，避免index超出colorPalette范围
          const baseColor = this.colorPalette[index % this.colorPalette.length] || '#00f3ff';
          // 计算半透明版本的颜色（用于渐变）
          const transparentColor = baseColor + '33'; // 透明度约20%

          return {
            name: item.name,
            type: 'line',
            data: item.data,
            // 线条样式
            lineStyle: {
              width: 2,
              // 线条发光效果
              shadowColor: baseColor,
              shadowBlur: 15,
              shadowOffsetY: 0
            },
            // 点样式
            symbol: 'circle',
            symbolSize: 6,
            emphasis: {
              symbolSize: 10,
              itemStyle: {
                shadowBlur: 20,
                shadowColor: baseColor,
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            // 填充区域（优化渐变效果）
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: transparentColor},  // 上方半透明
                {offset: 1, color: baseColor + '00'}   // 下方完全透明
              ])
            },
            // 平滑曲线
            smooth: true,
            // 动画效果
            animationDuration: 1500,
            animationEasing: 'elasticOut',
            // 增加数据点悬浮效果
            showSymbol: false,
          }
        }),


        // 动画配置
        animation: true,
        animationDuration: 1000,
        animationEasingUpdate: 'cubicOut'
      }
    },

    // 处理窗口大小变化
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  watch: {
    // 监听数据变化，更新图表
    chartData: {
      deep: true,
      handler() {
        if (this.chart) {
          this.chart.setOption(this.getChartOption())
        }
      }
    }
  }
}
</script>

<style scoped>
.tech-chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

</style>
